<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>boostrap表单</title>
</head>
<body>
    <div class="container">
        <form action="login.jsp" class="form-inline" >
            <div class=" mt-3 form-group  col-md-12">
                <label class="col-sm-3 col-form-label">Fist Name</label>
                <input type="text" class="form-control col-sm-9" placeholder="Fist Name" required>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">List name</label>
                <input type="text" class="form-control col-sm-9" placeholder="Last Name" required>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">Email Address</label>
                <input type="email" class="form-control col-sm-9" placeholder="Email Address" required>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">Mobile Number</label>
                <input type="number" class="form-control col-sm-9" placeholder="Mobile Number" required>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">Date of Birth</label>
               <select class="custom-select control-input col-sm-3">
                <option value="">Date</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
               </select>
               <select class="custom-select control-input col-sm-3">
                <option value="">Month</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
               </select>
               <select class="custom-select control-input col-sm-3">
                <option value="">Year</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
               </select>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">Postal Address</label>
                <textarea  rows="3" class="form-control col-sm-9" placeholder="Postal Address"></textarea>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">Zip Code</label>
                <input type="number" class="form-control col-sm-9" placeholder="Zip Code" required>
            </div>
            <div class="form-group col-md-12  mt-3">
                <label class="col-sm-3 col-form-label">Gender</label>
                <div class="form-check-inline">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="gender">Male
                    </label>
                </div>
                <div class="form-check-inline">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="gender">Female
                    </label>
                </div>
            </div>
            <div class="form-group col-md-12  mt-3">
                <div class="form-check-inline col-sm-9 offset-3">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" >I Agree to the 
                        <a href="#"> Terms and Conditions</a>
                    </label>
                </div>
            </div>
            <div class="form-group col-md-12  mt-3">
                <div class="col-sm-9 offset-3">
                    <input type="submit" value="Submit" class="btn btn-primary">
                    <input type="reset" value="Submit" class="btn btn-secondary">

                </div>
            </div>
        </form>
    </div>
</body>
</html>